Categoria: Programacion Tema: Css Titulo: Propiedades relacionadas al texto en CSS
Fecha del Tema: 2013-02-03 17:04:55 Propiedades relacionadas al texto A una de estas propiedades ya la vimos cuando comenzamos con los primerosconceptos: color, nos permite definir el color del texto, lo podemosindicar por medio de tres valores hexadecimales que indican la mezcla derojo, verde y azul. Por ejemplo si queremos rojo puro debemos indicar: color:#ff0000; Si queremos verde puro: color:#00ff00 Si queremos azul puro: color:#0000ff Luego si queremos amarillo debemos mezclar el rojo y el verde: color:#ffff00 Hay muchos programas que nos permiten seleccionar un color y nosdescomponen dicho valor en las proporciones de rojo,verde y azul. Otra forma de indicar el color, si tenemos los valores en decimal, es pormedio de la siguiente sintaxis: color:rgb(255,0,0); Es decir, por medio de la función rgb (red,green,blue), indicamos lacantidad de rojo, verde y azul en formato decimal. La segunda propiedad relacionada al texto es text-align, que puede tomaralguno de estos cuatro valores: left right center justify Si especificamos: text-align:center; El texto aparecerá centrado. Si queremos justificar a derecha, emplearemosel valor right y si queremos a la izquierda, el valor será left. La tercera propiedad relacionada al texto que podemos emplear estext-decoration que nos permite entre otras cosas que aparezca subrayado eltexto, tachado o una línea en la parte superior, los valores posibles deesta propiedad son: none underline overline line-through Como ejemplo, definiremos estilos relacionados al texto para las marcas decabecera h1,h2 y h3: <?php //esto no va <head> <title>Problema</title> <style type="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline; } h2 { color:#dd0000; text-align:center; text-decoration:underline; } h3 { color:#aa0000; text-align:right; text-decoration:underline; } </style> </head> <body> <h1>Título de nivel 1.<h1> <h2>Título de nivel 2.<h2> <h3>Título de nivel 3.<h3> </body> </html> ?>//esto no va Es decir, para los títulos de nivel 1 tenemos la regla: <?php //esto no va h1 { color:#ff0000; text-align:left; text-decoration:underline; } ?>//esto no va Es decir, color de texto rojo intenso, el texto debe aparecer de izquierdaa derecha y subrayado. Luego para la marca h2 tenemos: El color sigue siendo rojo pero un poco más oscuro, el texto debe aparecercentrado y subrayado. Y por último: <?php //esto no va h3 { color:#aa0000; text-align:right; text-decoration:underline; } ?>//esto no va Para los títulos de nivel tres, el texto es rojo más oscuro, alineado aderecha y subrayado. <?php //esto no va h2 { color:#dd0000; text-align:center; text-decoration:underline; } ?>//esto no va
Propiedades relacionadas al texto A una de estas propiedades ya la vimos cuando comenzamos con los primerosconceptos: color, nos permite definir el color del texto, lo podemosindicar por medio de tres valores hexadecimales que indican la mezcla derojo, verde y azul. Por ejemplo si queremos rojo puro debemos indicar: color:#ff0000; Si queremos verde puro: color:#00ff00 Si queremos azul puro: color:#0000ff Luego si queremos amarillo debemos mezclar el rojo y el verde: color:#ffff00 Hay muchos programas que nos permiten seleccionar un color y nosdescomponen dicho valor en las proporciones de rojo,verde y azul. Otra forma de indicar el color, si tenemos los valores en decimal, es pormedio de la siguiente sintaxis: color:rgb(255,0,0); Es decir, por medio de la función rgb (red,green,blue), indicamos lacantidad de rojo, verde y azul en formato decimal. La segunda propiedad relacionada al texto es text-align, que puede tomaralguno de estos cuatro valores: left right center justify Si especificamos: text-align:center; El texto aparecerá centrado. Si queremos justificar a derecha, emplearemosel valor right y si queremos a la izquierda, el valor será left. La tercera propiedad relacionada al texto que podemos emplear estext-decoration que nos permite entre otras cosas que aparezca subrayado eltexto, tachado o una línea en la parte superior, los valores posibles deesta propiedad son: none underline overline line-through Como ejemplo, definiremos estilos relacionados al texto para las marcas decabecera h1,h2 y h3: <?php //esto no va <head> <title>Problema</title> <style type="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline; } h2 { color:#dd0000; text-align:center; text-decoration:underline; } h3 { color:#aa0000; text-align:right; text-decoration:underline; } </style> </head> <body> <h1>Título de nivel 1.<h1> <h2>Título de nivel 2.<h2> <h3>Título de nivel 3.<h3> </body> </html> ?>//esto no va Es decir, para los títulos de nivel 1 tenemos la regla: <?php //esto no va h1 { color:#ff0000; text-align:left; text-decoration:underline; } ?>//esto no va Es decir, color de texto rojo intenso, el texto debe aparecer de izquierdaa derecha y subrayado. Luego para la marca h2 tenemos: El color sigue siendo rojo pero un poco más oscuro, el texto debe aparecercentrado y subrayado. Y por último: <?php //esto no va h3 { color:#aa0000; text-align:right; text-decoration:underline; } ?>//esto no va Para los títulos de nivel tres, el texto es rojo más oscuro, alineado aderecha y subrayado. <?php //esto no va h2 { color:#dd0000; text-align:center; text-decoration:underline; } ?>//esto no va
Css